<template>
  <div id="serve">
    <div class="container">
      <div class="serve_main">
        <div class="baozhang"></div>
        <div class="baoyou"></div>
        <div class="tuihuo"></div>
        <div class="tidian"></div>
        <div class="wangdian"></div>
        <p class="line1"></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  #serve {
    background-color: #fff;
    height: 100px;
    font-size: 15px;
  }

  #serve .serve_main {
    width: 1085px;
    margin: 0px auto;
    /*text-align: center;*/
  }

  #serve .serve_main div {
    margin: 30px 21px 0px 20px;
    transition: all .3s;
  }

  #serve .serve_main div:hover {
    transform: translateY(-10px);
  }

  #serve .baozhang {
    width: 170px;
    height: 41px;
    background-image: url("~@/images/afterSale/icons-1.png");
    background-position: -244px -588px;
    float: left;
  }

  #serve .baoyou {
    width: 157px;
    height: 41px;
    background-image: url("~@/images/afterSale/icons-1.png");
    background-position: -485px -588px;
    float: left;
  }

  #serve .tuihuo {
    width: 179px;
    height: 41px;
    background-image: url("~@/images/afterSale/icons-1.png");
    background-position: -725px -588px;
    float: left;
  }

  #serve .tidian {
    width: 182px;
    height: 41px;
    background-image: url("~@/images/afterSale/icons-1.png");
    background-position: -965px -588px;
    float: left;
  }

  #serve .wangdian {
    width: 181px;
    height: 41px;
    background-image: url("~@/images/afterSale/icons-1.png");
    background-position: -1204px -586px;
    float: left;
  }

  #serve .line1 {
    width: 1075px;
    height: 1px;
    border-top: 2px solid #ccc;
    clear: both;
    position: absolute;
    margin-top: 100px;
  }
</style>